class Lunbo {
    constructor() {
        this.init();
    }
    init() {
        this.content = $$(".product-list")
        this.prev = $$(".prev")
        this.next = $$(".next")
        this.contentBox = $$(".editor-pick-list")
        this.contentWidth = this.content.offsetWidth;
        this.count = 0;
        this.render().done($.proxy(function (res) {
            this.data = res.data.contents;
            this.show();
            on(this.prev, "click", $.proxy(this.changeContent, this))
            on(this.next, "click", $.proxy(this.changeContent, this))
        }, this))
    }

    show() {
        var html = "";
        for (var i = 0, item; item = this.data[i++];) {
            html += `<li>
            <a href="#">
                <div class="product-img">
                    <img src=${item.cover}
                        alt=""
                        data-original="//pic11.secooimg.com/product/300/300/2019/0701/4d0671081c7441d281090306d21f4ab6.jpg"
                        class="lazyPic">
                    <div class="mask"></div>
                </div>
                <div class="product-details">
                    <p class="product-name">THOM BROWNE/THOM BROWNE</p>
                    <p class="product-desc">${item.title}
                    </p>
                    <div class="line"></div>
                    <p class="product-price">￥${item.price}</p>
                </div>
            </a>
        </li>`
        }
        this.content.innerHTML = html;
    }

    render() {
        return $.ajax({
            url: "/lunbotu"
        })
    }

    changeContent(evt) {
        var e = evt || event;
        var target = e.target || e.srcElement;
        var pageNum = parseInt(this.data.length / 5);
        if (target.className == "prev" || target.parentNode.className == "prev") {
            if (this.count === 0) {
                this.count = pageNum;
                this.content.style.left = -pageNum * 1210 + "px";
            } else {
                this.count--;
                $(".product-list").animate({
                    left: -1210 * this.count,
                    right: -1210 * this.count,
                })
            }
        }
        if (target.className == "next" || target.parentNode.className == "next") {
            if (this.count === pageNum) {
                this.count = 0;
                this.content.style.left = 0;
            } else {
                this.count++;
                $(".product-list").animate({
                    left: -1210 * this.count,
                    right: -1210 * this.count,
                })
            }
        }
        // this.content.style.left = -this.boxWidth * this.count + "px";

    }
}
new Lunbo();